import React, { useCallback, useMemo, useState, useRef } from "react";
import $axios from '@/plugins/request'

import { Form, Input, Button, Checkbox, message, Row, Col, Image, Card } from 'antd';
import {
  UserOutlined,
  LockOutlined,
  RadarChartOutlined
} from '@ant-design/icons';



function Editpass(props) {
  //获取表单实例
  const refObj = useRef()
  const [form] = Form.useForm()
  const onFinish = useCallback(async (values) => {
    const { data } = await $axios.put('/api/users/editpwd', values)
    console.log('data', data);
    if (data.code != 1) {
      return message.warning(data.msg)
    } else {
      message.success(data.msg);
      // localStorage.setItem('userInfo', JSON.stringify(data.data))
      // props.history.push('/manage')
    }
    return data;
  }, [])
  //重置表单
  const reset = useCallback(() => {
    // form.resetFields()
    refObj.current.resetFields()
  }, [])
  return (
    <Card title="修改密码" style={{ width: "50%", position: "absolute", left: "20%", top: 200 }}>
      <Form
        ref={refObj}
        form={form}
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        autoComplete="off"
        style={{ width: 480, padding: 10, textAlign: "center", boxShadow: "3px,3px,#ccc" }}
      >
        <Form.Item
          label="原密码"
          name="oldpwd"
          rules={[
            {
              required: true,
              message: '请输入你的原密码',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="新密码"
          name="password"
          rules={[
            {
              required: true,
              message: '请输入你的新密码',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="confirm"
          label="确认密码"
          dependencies={['password']}
          hasFeedback
          rules={[
            {
              required: true,
              message: '请重新输入你的密码',
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次密码不匹配'));
              },
            }),
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit" style={{ marginRight: 15 }}>
            提交
          </Button>
          <Button htmlType="button" onClick={reset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </Card>

  )

}
export default Editpass;